<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue模板语法 </title>
  <script src="../libs/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 模板 template  -->
    <h2> {{title }}</h2>
    <div v-if="true">
      <h3   @click="++count">count - {{count}}  -- {{newCount}}</h3>
      <p v-text="word" v-once> </p>
      <p>
        <input type="text" v-model="word">
      </p>
      <div v-html="html"></div>
      <h1> {{flag ? 'wh2112 努力到凌晨2点':'明天看什么电影...?'}}</h1>
      <div v-if="!flag">
        <img :src="imgSrc" :title="title"  v-bind:data-word="word"  alt="" width="200" height="200" >
      </div>
      <button @click="flag=!flag">点击切换显示隐藏 </button>
    </div>
    <hr>
    <div>
      <h3>msg -- {{msg}}</h3>
      <p> <input type="text" v-model="msg" ></p>
      <h2>reversed msg --- {{msg.split("").reverse().join("") }} </h2>

      <h2>newMsg (computed)  --- {{ newMsg }}</h2>
      <h2>getMsg (method)  --- {{getMsg()}}</h2>
    </div>

    <div>
      <h2>计算属性 VS 侦听属性</h2>
      <p> 姓 <input type="text" v-model="firstName"></p>
      <p> 名 <input type="text" v-model="lastName"></p>
      <p>fullName : {{fullName}}</p>
      <p>NewName : {{NewName}}</p>
      <p>myName: {{myName}}</p>
    </div>
    <div>
      <h2>smallNum --- {{smallNum}}</h2>
      <h2>bidNum --- {{bigNum}}</h2>
      <button @click="smallNum = 4000 ">smallNum = 4000  </button>
      <button @click="bigNum = 6000 ">bigNum = 6000  </button>
    </div>
  </div>
  <script>
    const vm = new Vue({
      data:{  // 简单数据
        title:"Vue模板语法 + 计算属性 ",
        count:2000,
        word:"wh2112-daydayup",
        html:"<h2>WH2112-天道酬勤 </h2>",
        flag:!!0,
        imgSrc:"http://47.104.209.44/base/imgs/4.jpg",
        msg:"WH2112-DayDayUp yyds",
        firstName:"Zuozuomu",
        lastName:"Zkl",
        fullName:"",
        smallNum:1000
      },
      // 复杂数据  计算属性
      computed:{
        bigNum:{
          get(){
            return this.smallNum + 4000
          },
          set(v){
            this.smallNum  = v + 4000;
          }
        },
        newMsg(){
          return this.msg.split("").reverse().join('')  + ' ' +new Date().getTime()
        },
        newCount(){
          return this.count * 10 + 888 
        },
        NewName(){
          return this.firstName + " * " + this.lastName;
        },
        myName:{
          // getter  取值 获取依赖的计算属性的值
          get(){
            return this.firstName + "%" + this.lastName
          },
          // setter 监听计算属性的值主动改变
          set(v){   // 改变后的新值 
            console.log(v)
            var names = v.split("%")
            this.firstName = names[0]
            this.lastName = names[1]
          }
        }
      },
      // 监听数据的改变  侦听属性  
      watch:{
        firstName(v){
          console.log(v)
          this.fullName = v + " & " + this.lastName;
        },
        lastName(v){
          console.log(v)  // 新的值
          this.fullName = this.firstName + " & " + v 
        }
      },
      methods:{
        getMsg(){
          return this.msg.split("").reverse().join('')  +' ' + new Date().getTime()
        }
      },
      mounted(){
        document.querySelectorAll("title")[0].innerHTML = this.title ;
        this.fullName = this.firstName + " & "  + this.lastName;
      }
    }).$mount("#app")
  </script>
   <!-- 
        Vue.js 使用了基于 HTML 的模板语法  允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
        Vue 将模板编译成虚拟 DOM 渲染函数
        结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少(Diff 算法 )

        {{ }} 模板语法 双大括号语法 文本插值   插值表达式 
        无论何时，绑定的数据对象上  property 发生了改变，插值处的内容都会更新
        v-text  绑定文本  textContent 
        v-html  绑定html  innerHTML 
        v-once  你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
        v-bind  绑定属性 attr  : 缩写  attribute 
        v-on    绑定事件   @  
        v-if    
        v-show 
     -->

     <!-- 
        data 属性   用来初始化 数据   简单数据    
        计算属性    对于任何复杂逻辑，你都应当使用计算属性  
        computed    是一个变量  类似data  this.xxxx
        依赖  其他某个数值   watcher 
        缓存  只有修改计算属性依赖的值 才会重新计算求值  (计算属性是基于它们的响应式依赖进行缓存的)
        

        拆分写法  
        getter  默认有一个  getter 取值 
        setter  监听计算属性的值主动改变 




        侦听属性  watch   (修改数据 触发监听 从而请求ajax)
        监听某些数据需要随着其他的数据的变化而变化   
        监听变量变化 然后获取ajax 
    -->
</body>
</html>